<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2021/3/31
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/message2.css">
<html>
<head>
    <title>项目预约</title>
<%--    <style>
        .modal-dialog {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .modal-content {
            /*overflow-y: scroll; */
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .modal-body {
            overflow-y: scroll;
            position: absolute;
            top: 55px;
            bottom: 65px;
            width: 100%;
        }

        .modal-header .close {
            margin-right: 15px;
        }

        .modal-footer {
            position: absolute;
            width: 100%;
            bottom: 0;
        }
    </style>--%>
</head>
<body>
<input type="hidden" id="hidden" value="${id}">
<input type="hidden" id="memberID" value="${memberID}">
<%--流体容器--%>
<div class="container">
    <%--行--%>
    <div class="row">
        <div class="col-lg-12">
            <div class="jumbotron jumbotron-fluid">
                <div class="container">
                    <h1 class="display-4">蒋峰健康商城</h1>
                    <p class="lead">您现在处于体检套餐项目预约页面:</p>
                </div>
            </div>
        </div>
    </div>

    <%--行--%>
    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-12">
                <div id="app">
                    <template>
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    fixed
                                    prop="name"
                                    label="套餐名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="sex"
                                    label="适合性别"
                                    width="60">
                                <template slot-scope="scope" width="60">
                                    <label v-if="tableData[scope.$index].sex==0">男女通用</label>
                                    <label v-if="tableData[scope.$index].sex==1">男</label>
                                    <label v-if="tableData[scope.$index].sex==2">女</label>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="age"
                                    label="适合年龄"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="套餐价格(元)"
                                    width="60">
                            </el-table-column>
                            <el-table-column
                                    prop="remark"
                                    label="套餐解读"
                                    width="300">
                                <template slot-scope="scope" width="60">
                                    <label v-if="tableData[scope.$index].remark==null">暂无解读</label>
                                    <label v-if="tableData[scope.$index].remark==''">暂无解读</label>
                                    <label v-if="tableData[scope.$index].remark!=null">{{tableData[scope.$index].remark}}</label>

                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="attention"
                                    label="注意"
                                    width="180">
                                <template slot-scope="scope" width="60">
                                    <label v-if="tableData[scope.$index].attention==null">暂时没什么需要注意的</label>
                                    <label v-if="tableData[scope.$index].attention==''">暂时没什么需要注意的</label>
                                    <label v-if="tableData[scope.$index].attention!=null">{{tableData[scope.$index].attention}}</label>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="240">
                                <template slot-scope="scope">
                                    <el-button type="text" size="medium" @click="modalBox">点击查看套餐详情</el-button>
                                    <el-button type="text" size="medium" @click="modalBox2">点击预约套餐</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <%--modal fade--%>
                    <%--模态框--%>
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel2">套餐详情:</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <span id="span">套餐包含了:</span>
                                    <p v-for="(i,index) in list"><b>{{i.checkItemName}}</b>----价格:<b>{{i.price}}</b>元----适合年龄:<b>{{i.age}}岁</b>
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <a id="jump">
                                        <button type="button" class="btn btn-primary" id="btn2" @click="guanbi()">确定
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <%--预约套餐模态框--%>
                    <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel3">套餐预约:</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <el-form ref="form" :model="form" label-width="80px">
                                        <el-form-item label="预约日期">
                                            <el-col :span="11">
                                                <el-date-picker type="date" placeholder="选择日期" v-model="form.orderDate"
                                                                style="width: 100%;"></el-date-picker>
                                            </el-col>
                                            <el-col class="line" :span="2">-</el-col>
                                            <el-col :span="11">
                                                <el-time-picker placeholder="选择时间" v-model="form.date2"
                                                                style="width: 100%;"></el-time-picker>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item label="预约类型">
                                            <el-radio-group v-model="form.orderType">
                                                <el-radio label="电话预约"></el-radio>
                                                <el-radio label="微信预约"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>


                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <a id="jump2">
                                        <button type="button" class="btn btn-primary" @click="addOrderSetMeal(form)" id="btn3">预约
                                        </button>
                                    </a>
                                </div>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/message.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/static/js/axios-0.18.0.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            tableData: [],
            list: [],
            form: {}
        }
        , data() {
            return {
                tableData: [],
                list: [],
                form: {
                    member_id:$("#memberID").val(),
                    orderDate:'',
                    orderType:'',
                    orderStatus:'无',
                    setmeal_id:$('#hidden').val()
                }
            }
        }, methods: {
            querySetmeal() {
                axios.get("/user/valueMeal", {
                    params: {
                        id: $("#hidden").val()
                    }
                }).then(data => {
                    console.log("this:" + this);
                    console.log("data.list:" + data.data)
                    this.tableData = data.data;
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, packageDetails() {
                axios.get("/user/packageDetails", {
                    params: {
                        id: $("#hidden").val()
                    }
                }).then(data => {
                    console.log("this:" + data);
                    //   console.log("list:"+JSON.stringify(data.data));
                    this.list = data.data;

                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, modalBox() {
                $("#exampleModal").modal('show');
            }, guanbi() {
                $("#exampleModal").modal('hide');
            }, modalBox2() {
                $("#exampleModal2").modal('show');
            },open1(){
                this.$message({
                    message: '预约成功',
                    type: 'success'
                });
            },open2(){
                this.$message.error('预约失败!');
            },addOrderSetMeal(form){
                axios.post('/user/addOrderSetMeal',{
                    "member_id":form.member_id,
                    "orderDate":form.orderDate,
                    "orderType":form.orderType,
                    "orderStatus":form.orderStatus,
                    "setmeal_id":form.setmeal_id
                }).then(data =>{
                    if (data.data==true||data.data=="true"){
                        this.open1();
                        $("#exampleModal2").modal('hide');
                    }else{
                        this.open2();
                    }
                }).catch(e =>{
                    alert("错误信息为:"+e);
                    this.open2();
                });
            }
        }, created() {
            this.querySetmeal();
            this.packageDetails();
        }
    });
</script>
</html>
